<template>
  <h1>欢迎访问我们的网站！</h1>
  <button id="preview-btn">预览当前页面</button>
  <div id="show">
    <h1>预览咯</h1>
    <table>
      <tr>
        <td>diyinlan</td>
        <td>diyinlan</td>
        <td>diyinlan</td>
      </tr>
      <tr>
        <td>diyinlan</td>
        <td>diyinlan</td>
        <td>diyinlan</td>
      </tr>
    </table>
  </div>
  <button @click="exportToWord">导出为Word</button>
</template>

<script setup>
import { onMounted } from 'vue';
onMounted(() => {
  document.getElementById('preview-btn').addEventListener('click', function () {
    // var printContents = document.documentElement.outerHTML;
    var printContents = document.getElementById('show').outerHTML;
    var printWindow = window.open('', 'Print', `height=600,width=600,top=${screen.height / 2 - 300},left=${screen.width / 2 - 300}`);
    printWindow.document.write('<html><head><title>页面预览</title>');
    printWindow.document.write('</head><body >');
    printWindow.document.write(printContents);
    printWindow.document.write(screen.height);
    printWindow.document.write('</body></html>');
    printWindow.document.close();
  });
});
const exportToWord = () => {
  // 获取网页内容
  // 获取网页内容
  // var htmlContent = document.documentElement.innerHTML;
  var htmlContent = document.getElementById('show').innerHTML;
  // 创建Blob对象
  var blob = new Blob([htmlContent], { type: 'application/msword' });

  // 创建下载链接
  var link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = 'exported_content.docx'; // 设置下载文件名

  // 将链接添加到页面中
  document.body.appendChild(link);

  // 模拟点击链接开始下载
  link.click();
}

</script>

<style lang="less" scoped>
.gantt-box {
  width: 1000px;
  height: 400px;
}

// /deep/.default-quick-info {
//     background-color: aqua;
// }
</style>

